<template>
    <div class="tab-control">
        <div v-for="(item,index) in titles"
             :key="index"
             @click="itemClick(index)"
             class="tab-control-item" :class="{active:index==currentIndex}">
            <span>{{ item}}</span>
        </div>

    </div>
</template>
<script>
    import {ref} from "vue";

    export default {
      name:"tabControl",
      props:{
        titles:{
          type:Array,
          default() {
            return [];
          }
        }
      },
      setup(props,{emit}) {
          let currentIndex = ref(0)
          const itemClick = (index) =>{
            currentIndex.value = index;
            emit('tabClick',index)

          }
          return {
             currentIndex,
             itemClick
          }
      }
    }
</script>

<style scoped lang="scss">
  .tab-control{
    z-index: 10;
    display: flex;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    width: 100%;

    position: sticky;
    top: 44px;

    .tab-control-item{
      flex: 1;
       span{
          padding: 5px;
       }
    }
    .active{
      color: var(--color-tint);
      border-bottom: 3px solid var(--color-tint);
    }
  }
</style>